iT邦幫忙

2022 iThome 鐵人賽

DAY 28
1
自我挑戰組

30天JavaScript自學挑戰系列 第 28

Day 28 Call Stack

  • 分享至 

  • xImage
  •  

之前提到call stack是由EC組成的,它是EC相互堆疊的地方,以便追蹤我們在程式執行中所處的位置,堆疊在最頂端的EC就是當下正在運行的EC,當它執行完後就會從call stack被移除。

舉例來說,假設下面的程式碼已經編譯完成,開始執行:

const str = "Hello, world";

const  f1 = function(x) {
    const a = 1;
    const b = f2();
    return x + a + b;
};

function f2() {
    const c = 5;
    return c;
}

const result = f1(3);

首先會為top-level code創造出一個global EC,top-level code是在函數外的程式碼,所以可以說,在一開始時,只有在函數外的程式碼會被執行。
在上述例子中,第一行與最末行宣告的兩個變數以及中間的兩個函數就屬於top-level code,但函數內部的程式碼不是,此時這個global EC將被放入call stack中,因為目前call stack裡只有這個global EC,所以它位於最頂層,即當前執行的程式碼。

當程式碼執行到最末行時,會發現這個result變數的值是呼叫f1函數而來的(函數一旦被呼叫,就會獲得該函數的EC),此時f1函數的EC就會被加入call satck中,堆疊在global EC的上方,所以f1函數的EC成為了當前執行的程式碼。

當f1函數被呼叫時所傳入的引數3會被加入到f1函數EC的引數物件中,f1函數EC中有兩個宣告的變數a和b,當執行到宣告變數b這行程式碼時,f2函數被呼叫,此時f2函數的EC被加入到call satck中,堆疊在f1函數EC的上方,變成當前執行的程式碼,因為JavaScript只有一個執行線程,也就是一次只能做一件事,所以這時候f1函數的執行就先被暫停了。

當f2函數執行完畢後,它會從call stack中被移除,f1函數EC此時又位於call stack最頂層,便開始執行先前尚未執行完的程式碼,當f1函數執行完畢後,它也一樣會被移除,此時位於最頂層的又是global EC了。

在global EC最末行呼叫的f1函數回傳的值被賦予給result變數後,執行就結束了,此時call stack會一直維持global EC在最頂層的狀態,直到真正結束,也就是當我們關閉瀏覽器之後,global EC便從call stack中被移除。


上一篇
Day 27 Execution Context (EC)
下一篇
Day 29 Scope Chain
系列文
30天JavaScript自學挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言